<template>
    <div>
        <video id="singleVideo" preload="none" class="video-js vjs-default-skin video"></video>
    </div>
</template>

<script>
    import 'video.js/dist/video-js.css'
    import videojs from 'video.js';
    import 'videojs-contrib-hls'

    export default {
        components: {},
        props: {},
        data() {
            return {
                id: '',
                url: ''
            };
        },
        watch: {},
        computed: {},
        methods: {
            get_info() {
                this.$get(this.$api.monitor + '/' + this.id).then(res => {
                    this.url = res.data.url;
                    this.getVideo();
                })
            },
            onload() {
                this.id = this.$route.params.id;
                this.get_info();
            },
            getVideo() {
                let singlePlayer = videojs("singleVideo", {
                    autoplay: true,//自动播放
                    controls: true,//控件显示
                    width: "500",//视频框宽度
                    height: "264",//视频框高度
                });
                let res = this.url;
                if (res) {
                    singlePlayer.src({src: res, type: "application/x-mpegURL"});
                    singlePlayer.play();
                }
            },

        },
        created() {
            this.onload();
        },
        mounted() {
            this.getVideo();
        }
    };
</script>
<style lang="scss" scoped>
    .video {
        margin: 0 auto;
    }
</style>
